<!--
 * @Date: 2022-11-07 12:06:37
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-11-10 12:38:54
 * @FilePath: \vue-admin-ts\src\views\Login\components\login-pannel\index.vue
 * @Description: 登录面板
-->
<template>
  <div class="login_pannel_container">
    <h1 class="title">后台管理系统</h1>
    <el-tabs
      type="border-card"
      stretch
      v-model="activeName"
      @tabChange="tabChange"
    >
      <el-tab-pane name="userName">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon>
              <calendar />
            </el-icon>
            <span>账号登录</span>
          </span>
        </template>
        <!-- 账号登陆tab -->
        <myForm
          :options="userNameOptions"
          ref="userNameFormRef"
          label-width="auto"
          size="large"
        ></myForm>
      </el-tab-pane>
      <el-tab-pane name="phone">
        <template #label>
          <span class="custom-tabs-label">
            <el-icon><iphone /></el-icon>
            <span>手机登录</span>
          </span>
        </template>
        <!-- 手机登陆tab -->
        <myForm
          :options="phoneFormOptions"
          ref="phoneFormRef"
          label-width="auto"
          size="large"
        >
          <template #code="{ scope }: { scope: ISlotScope }">
            <el-form-item
              :prop="scope.option.prop"
              label="验证码"
              :rules="scope.rules.code"
            >
              <div class="code_login">
                <el-input
                  v-model="scope.model.code"
                  :placeholder="scope.option.placeholder"
                ></el-input>
                <el-button
                  class="get_code_btn"
                  type="primary"
                  size="default"
                  :disabled="scope.model.phone === ''"
                  @click="getCode(scope)"
                  >点击获取</el-button
                >
              </div>
            </el-form-item>
          </template>
        </myForm></el-tab-pane
      >
    </el-tabs>
    <div class="setting_box">
      <el-checkbox v-model="keepPassword" label="记住密码" size="large" />
      <el-button text link type="primary">忘记密码</el-button>
    </div>
    <el-button
      type="primary"
      size="large"
      class="submit_btn"
      :loading="isSubmitLoading"
      @click="
        submitForm(activeName === 'userName' ? userNameFormRef : phoneFormRef)
      "
      >立即登陆</el-button
    >
  </div>
</template>
<script lang="ts" setup>
import { TabPaneName } from "element-plus";
import { Calendar, Iphone } from "@element-plus/icons-vue";
import myForm from "@/components/Form/MyForm.vue";
import type { IMyFormInstance } from "./type";
import type { ISlotScope } from "@/components/Form/type/type";
import { ref } from "vue";
import { userNameOptions, phoneFormOptions } from "./options";
import { useStore } from "@/store";
const userNameFormRef = ref<IMyFormInstance>();
const phoneFormRef = ref<IMyFormInstance>();
const isSubmitLoading = ref<boolean>(false);
const keepPassword = ref<boolean>(false);
const activeName = ref("userName");
const store = useStore();
const tabChange = (name: TabPaneName) => {
  console.log(name);
  if (name === "userName") {
    phoneFormRef.value?.resetFields();
  } else if (name === "phone") {
    userNameFormRef.value?.resetFields();
  }
};
//获取验证码
const getCode = (scope: ISlotScope) => {
  scope.form.validateField("phone", (valid, err) => {
    console.log("msg", valid);
    // dosomething
  });
};
const submitForm = (formEl: IMyFormInstance | undefined) => {
  if (!formEl) return;
  const validate = formEl.formValidate();
  const formData = formEl.getFormData();
  validate((valid) => {
    if (valid) {
      store.dispatch("loginModule/accountLoginAction", { ...formData });
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>
<style lang="less" scoped>
.login_pannel_container {
  width: 320px;
  .title {
    text-align: center;
  }
  .code_login {
    display: flex;
    align-items: center;
    .get_code_btn {
      margin-left: 5px;
    }
  }
  .setting_box {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .submit_btn {
    margin-top: 10px;
    width: 100%;
  }
}
</style>
